svg.js教程及使用手册详解(一) |
您所在的位置:网站首页 › svg viewport › svg.js教程及使用手册详解(一) |
做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG。网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言。网上关于SVG的所谓教程基本上都是SVG本身,但是却没有一个针对svg.js这样的集成的SVG库进行具体讲解的教程,做这件事的,本文应该是第一篇,也是给那些需要动态的使用SVG的兄弟们一点帮助。 简介:SVG.js是一个轻量级的JavaScript库,允许你轻松操作SVG和定义动画。 SVG(Scalable Vector Graphics,可缩放矢量图形)是基于XML、用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。 SVG.js中包含了大量用于定义动画的方法,如移动、缩放、旋转、倾斜等,具体可参阅相关演示。 SVG.js中的一些亮点: 易读的简洁的语法 非常轻量,gzip压缩版只有5k 针对大小、位置、颜色等的动画元素 模块化结构,轻松扩展 各种实用插件 各种形状类型间拥有统一的API. 元素可以绑定事件,包括触摸事件 完全支持不透明蒙版 元素组 动态渐变 填充模式 完整的文档记录 使用说明: 创建一个SVG文档使用SVG()函数来在一个给定的html元素中创建一个SVG文档: var draw = SVG('canvas').size(300, 300) var rect = draw.rect(100, 100).attr({ fill: '#f06' })其中SVG()中的参数可以使一个元素的id或者元素本身。 以上两句将在html文档中产生以下代码: 当然,要定义SVG画布的大小,除了使用像素之外,也可以使用百分比的。如下: var draw = SVG('canvas').size('100%', '100%') 检测浏览器对SVG的支持度在使用svg.js之前,可以先用以下的代码来检测浏览器对svg.js这个库的支持情况: if (SVG.supported) { var draw = SVG('canvas') var rect = draw.rect(100,100) } else { alert('SVG not supported') } ViewBox的属性可以用viewbox()方法来确定,viewbox()方法就像是一个setter函数一样,如下所示: draw.viewbox(0,0,297,210)上面的一行代码和下面的一行代码是等价的,前两个参数表示的位置,后两个是其宽度和高度。 draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })如果没有任何参数,那么viewbox就直接返回一个空的: var box = draw.viewbox()viewbox() 方法可以有zoom属性, var box = draw.viewbox() var zoom = box.zoom如果viewbox中的的大小和实际的SVG画布的大小相同,那么zoom的值就是1. SVG 文档svg.js也可以在htmlDOM外工作,如下所示,是一个独立的svg文件,就像是外部的js文件一样。 var draw = SVG('viewport') draw.rect(100,100).animate().fill('#f03').move(100,100) ]]>今天说了svg.js的简介,检测支持度,创建svg,viewbox等内容,下面将持续更新svg.js的其他方法的用法,敬请关注! 原文链接:http://www.jinlongtalk.com/2017/02/21/svg-js1/
|
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |